import { getTemplate, getSlotTemplate, getStringTypeAttr } from '@/components/template'
import guid from '@/utils/guid'
// 深度合并
import mergeDeep from '@/utils/mergeDeep'
var handle = function (_attr, _slots, { id }) {
  
  // 首次拖动组件进视图，入参为：_attr = {}, _slots = {}, id = "2aeb6fd6-e7cd"
  // 定义默认属性
  let attributes = {
      itemNum: {
        type: 'number', // 匹配属性面板的控件
        value: 2,
        children: {},
        tips:'控制内置按钮的数量'
      },
      size: {
        type: 'selection',
        items: ['large', 'small', ''],
        value: '',
      },
      shape: {
        type: 'selection',
        items: ['circle', ''],
        value: '',
      },
      vertical: {
        type: 'boolean',
        value: false,
      },
    },
    slots = {
      default: [],
    }
  //覆盖默认属性
  Object.assign(slots, _slots)
  Object.assign(attributes, _attr)
  //   if (attributes.itemNum.value < 0) {
  //     attributes.itemNum.value = 0
  //   }
  //根据组件不同需要做的不同操作
  let max = _attr.itemNum ? _attr.itemNum.value : attributes.itemNum.value // 内置项的数量，如果有传入就取传入的
  let components = JSON.parse(JSON.stringify(_Vue.$store.state.components))
  // 这里输入的id是嵌套的父组件的id，即ButtonGroup的id
  // 获取ButtonGroup组件，如果没有获取到的话，取传入的_slots
  // let component = components.find((c) => c.info.id === id) || { slots }
  // let oldSlots = slots // 原本的slots，一开始拖动组件进视图，这里为  default: []
  let newSlot = []
  let addComponent = () => {
    let info = {
      name: 'Button',
      ui: 'iview-UI',
      id: guid(),
      open: false
    }
    // 生成了嵌套的button组件的数据，然后更新到components里面去，即组件内置项也会单独抽离出去直接保存在components
    let colComponent = getTemplate(info, '', '')
    colComponent.parentId = id // id为ButtonGroup的id

    components.push(colComponent)
    return colComponent
  }
  //  遍历内置项

  // 如果修改有几个内置项，defaul的长度就会是多少，即他是组件下新的slots
  for (let i = 0; i < max; i++) {
    // if (oldSlots.default[i]) {
    if (slots.default[i]) {
      //当拖动radio组件放置在ButtonGroup组件,slots有数据，会走这里，当max改变时（即内置项的数量改变），
      newSlot.push(slots.default[i])
      // newSlot.push(oldSlots.default[i])
    } else {
      // 一开始拖动组件进视图，由于slots为default: []，所以会走这里
      newSlot.push({ id: addComponent().info.id })
    }
  }

  // let arr = oldSlots.default.filter((item) => {
  // 通过itemNum来减少内置项的数量
  // arr 为要删除的内置项【在旧的slots中存在，但是在新的slots（newSlot）已经不存在了，就说明该项是要删除的】

  let arr = slots.default.filter((item) => {
    // 对slots.default做遍历，判断遍历项item是否存在于newSlot中，不存在才返回对应的遍历项item
    return newSlot.findIndex((item1) => item.id === item1.id) === -1
  })
  

  // 执行删除
  arr.forEach(({ id }) => {
    let index = components.findIndex((c) => c.info.id === id)
    components.splice(index, 1)
  })
  slots.default = newSlot
  _Vue.$store.commit('setState', { components: components })

  //获取插槽模板内容
  let subContent = getSlotTemplate(slots)
  //设置当前组件的slot

  if (attributes.slot && attributes.slot !== 'default') {
    attributes.slot = {
      type: 'text',
      value: attributes.slot,
    }
  } else {
    attributes.slot = {
      type: 'text',
      value: '',
    }
  }

  //字符串模板操作
  let stringAttr = getStringTypeAttr(attributes)
  let template = `<Button-group
                        ${stringAttr}>
                        ${subContent}
                    </Button-group>`

  //删除自定义非ui属性
  template = template.replace(`:itemNum="${attributes.itemNum.value}"`, '')
  
  return { template, attributes, slots }
}
export default handle
